import { Form, Button, Input, Row, Col, message } from 'antd';

const FormItem = Form.Item;

const formLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
};
const buttonLayout = {
  span: '18',
  offset: '4'
};

let SettingsForm = ({ unit, form, updateFetching, onUnitSettingsUpdate }) => {
  const { getFieldProps, validateFields } = form;
  const { type, url } = unit;

  const onSubmit = (evt) => {
    evt.preventDefault();
    const needValidateFields = [];
    switch (type) {
      case 'LINNER':
      case 'MAVEN':
      case 'MAVEN_PARENT':
        needValidateFields.push('gitUrl', 'gitBranch');
        break;
      case 'MAVEN_SUB':
        needValidateFields.push('path');
        break;
      case 'DOCKER_IMAGE':
        needValidateFields.push('imageTag');
        break;
      default:
    }
    validateFields(needValidateFields, (error, values) => {
      if (!!error) {
        return;
      }
      let newUrl;
      switch (type) {
        case 'LINNER':
        case 'MAVEN':
        case 'MAVEN_PARENT':
          newUrl = `${values.gitUrl}:${values.gitBranch}`;
          break;
        case 'MAVEN_SUB':
          newUrl = values.path;
          break;
        case 'DOCKER_IMAGE':
          newUrl = values.imageTag;
          break;
        default:
      }
      const params = {
        url: newUrl
      };
      onUnitSettingsUpdate(unit.id, params)
        .then(({ error: actionError }) => {
          if (!!actionError) {
            return;
          }
          message.success('保存成功');
        });
    });
  };

  let formItems;
  if (type === 'LINNER' || type === 'MAVEN' || type === 'MAVEN_PARENT') {
    const colonIndex = url.lastIndexOf(':');
    const gitUrl = url.substring(0, colonIndex);
    const gitBranch = url.substring(colonIndex + 1);

    const gitUrlField = getFieldProps('gitUrl', {
      rules: [
        { required: true, message: '请填写 Git 仓库地址' }
      ],
      initialValue: gitUrl
    });
    const gitBranchField = getFieldProps('gitBranch', {
      rules: [
        { required: true, message: '请填写 Git 分支名称' }
      ],
      initialValue: gitBranch
    });
    formItems = [
      <FormItem required key='gitUrl' label='Git repository url：' {...formLayout}>
        <Input type='text' {...gitUrlField}/>
      </FormItem>,
      <FormItem required key='gitBranch' label='分支：' {...formLayout}>
        <Input type='text' style={{ width: '200px' }} {...gitBranchField}/>
      </FormItem>
    ];
  } else if (type === 'MAVEN_SUB') {
    const pathField = getFieldProps('path', {
      rules: [
        { required: true, message: '请填写子工程相对路径' }
      ],
      initialValue: url
    });
    formItems = [
      <FormItem required key='path' label='路径：' {...formLayout}>
        <Input type='text' style={{ width: '200px' }} {...pathField}/>
      </FormItem>
    ];
  } else { // DOCKER_IMAGE
    const imageTagField = getFieldProps('imageTag', {
      rules: [
        { required: true, message: '请填写 Docker Image tag' }
      ],
      initialValue: url
    });
    formItems = (
      <FormItem required label='Image tag：' {...formLayout}>
        <Input type='text' {...imageTagField}/>
      </FormItem>
    );
  }

  return (
    <Form horizontal onSubmit={onSubmit} form={form}>
      {formItems}
      <Row>
        <Col {...buttonLayout}>
          <Button processing={updateFetching} type='primary' htmlType='submit'>确定</Button>
        </Col>
      </Row>
    </Form>
  );
};
SettingsForm = Form.create()(SettingsForm);

export default SettingsForm;
